{__NOLAYOUT__}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <link href="__STATIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="__STATIC__/jquery-3.3.1.min.js"></script>
    <script src="__STATIC__/jquery.form.min.js"></script>
    <script src="__STATIC__/bootstrap/js/bootstrap.min.js"></script>
    <link href="__STATIC__/style.css" rel="stylesheet">
    <link href="__STATIC__/flatpicker/flatpicker.css" rel="stylesheet">
    <script src="__STATIC__/flatpicker/flatpicker.js"></script>
    <script src="__STATIC__/layer/layer.js"></script>
    <link href="__STATIC__/jstree/themes/default/style.min.css" rel="stylesheet">
    <script src="__STATIC__/jstree/jstree.js"></script>
</head>

<div class="container">
    <div class="row">
        <form id="role-form" class="mt10" method="post" action="addRole" enctype="multipart/form-data">
            <div class="col-sm-6 ">
                <div class="form-group">
                    <label>角色ID</label>
                    <input type="text" id="ROLE_ID" name="ROLE_ID" placeholder="由三位字母或数字组成" class="form-control">
                </div>
            </div>
            <div class="col-sm-6 ">
                <div class="form-group">
                    <label>角色名称</label>
                    <input type="text" id="NAME" name="NAME" class="form-control">
                </div>
            </div>
            <div class="col-sm-6 ">
                <div class="form-group">
                    <label>角色备注</label>
                    <input type="text" id="REMARKS" name="REMARKS" class="form-control">
                </div>
            </div>
            <div class="col-sm-12 ">
                <div class="form-group">
                    <label>角色权限</label>
                    <div style="border: #ddd 1px solid ;border-radius: 4px;padding: 6px;">
                        {volist name="ruleList" id="r1"}
                        <label>
                            <input type="checkbox" name="RULES[]" {$r1.selected ? 'checked':''} value="{$r1.ID}">
                            <span class="{$r1.icon}" aria-hidden="true"></span>
                            <span>{$r1.TEXT}</span>
                        </label>

                        <div style="padding-left: 20px;">
                            {volist name="r1.children1" id="vo"}
                            <label style="margin-right: 10px;font-weight: normal">
                                <input type="checkbox" name="RULES[]" {$vo.selected ? 'checked':''} value="{$vo.ID}">
                                <span class="{$vo.icon}" aria-hidden="true"></span>
                                <span>{$vo.TEXT}</span>
                            </label>
                            {/volist}
                        </div>

                        <div style="padding-left: 20px;">
                            {volist name="r1.children2" id="vo"}
                            <label style="margin-right: 10px;font-weight: normal">
                                <input type="checkbox" name="RULES[]" {$vo.selected ? 'checked':''} value="{$vo.ID}">
                                <span class="{$vo.icon}" aria-hidden="true"></span>
                                <span>{$vo.TEXT}</span>
                            </label>
                            {/volist}
                        </div>

                        {/volist}
                    </div>
                </div>
            </div>

            <div class="col-sm-12" style="margin-top: 10px;margin-bottom: 20px;text-align: center">
                <button id="add-button" type="button" class="btn btn-info">新增</button>
                <button type="reset" class="btn btn-default">重置</button>
            </div>
        </form>
    </div>
</div>

<script>

    $(function () {

        $("#add-button").on('click', function () {

            /**
             * 表单验证
             */
            var name = $("#NAME").val();
            if (name.length == 0) {
                layer.alert('请输入角色名称');
                return;
            }

            layer.confirm('确认新增角色吗？', function (index) {
                $("#role-form").ajaxSubmit( function (text) {
                    var json = JSON.parse(text);
                    if(json['code'] == '200'){
                        layer.alert(json['msg'],{icon:1},function () {
                            layer.closeAll();
                        })
                    }else{
                        layer.alert(json['msg'],{icon:2},function (index) {
                            layer.close(index);
                        })
                    }
                })
            });
        })
    });

</script>